<template>
  <div class="drag-table">
        <Introduce title="拖拽表格">
          <template #introduce>
            这里简化了普通表格仿照了vue-element-admin项目的拖拽表格
          </template>
        </Introduce>
        <!-- <h3>拖拽表格</h3>
        <div class="introduce">这里简化了普通表格仿照了vue-element-admin项目的拖拽表格</div> -->
      
       <el-table ref="dragTable" :data="studentList"  v-loading="load" >
        <el-table-column
            prop="studentnumber"
            label="学号"
            align="center"
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            align="center"
            min-width="100">
        </el-table-column>
         <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="60">
        </el-table-column>
        <el-table-column
            prop="score"
            label="总学分"
            align="center"
            width="120">
        </el-table-column>
         <el-table-column
            prop="state"
            label="考核状态"
            align="center"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
             align="center"
            min-width="250">
        </el-table-column>
         <el-table-column
            prop="date"
            label="日期"
             align="center"
            width="180">
            <template #default="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
import {ref,onMounted,nextTick} from 'vue'
import {queryStudent} from '../../../api/student'
import Sortable from 'sortablejs'
export default {
  setup(){
     /** 变量定义部分 **/
     //表格数据
     let studentList = ref([])
     //加载标志
     let load = ref(false)
     let dragTable = ref(null)
      /** 生命周期钩子  **/
       //页面挂载
       onMounted(()=>{
           getStudent()

       })

           
      /**数据请求部分**/
       //请求学生数据
       const getStudent = ()=>{
           load.value = true
            queryStudent(1,15).then(res=>{
                res = res.data
                studentList.value = res.data.list
                load.value = false
                nextTick(()=>setSortTable())
            })
       }

       const setSortTable = ()=>{
         const el = dragTable.value.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
         Sortable.create(el,{
            ghostClass: 'sortable-ghost',
            setData: (data)=>{
              data.setData('Text','')
            },
            onEnd: evt=>{
              const targetRow = studentList.value.splice(evt.oldIndex,1)[0]
              studentList.value.splice(evt.newIndex,0,targetRow)

            }
         })
       }
      

     return {studentList,dragTable,load}
  }
}
</script>

<style lang="scss" scoped>

</style>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983 !important;
}
</style>